<template>
	<view class="page">
		<image class="img img__stuf" src="/static/icons/login_stuf.png" mode="aspectFit"></image>
		<image
			class="img img__compass"
			src="/static/icons/login_compass.png"
			mode="aspectFit"
		></image>
		<image class="img img__timer" src="/static/icons/login_timer.png" mode="aspectFit"></image>

		<!-- 登录框 -->
		<view class="login-box">
			<view class="login-box-title">登录</view>

			<wd-form class="login-box-form" ref="formRef" :model="formData">
				<wd-input
					v-model="formData.mobile"
					prop="mobile"
					label="手机号"
					label-width="70px"
					clearable
					placeholder="请输入手机号"
					:rules="[{ required: true, message: '请填写手机号' }]"
				/>
				<wd-input
					v-model="formData.password"
					prop="password"
					label="密码"
					label-width="70px"
					show-password
					clearable
					placeholder="请输入密码"
					:rules="[{ required: true, message: '请填写密码' }]"
				/>
			</wd-form>

			<view class="login-box-footer">
				<wd-button class="btn btn__guest" type="info" size="large" @tap="onGuestLogin">
					游客登录
				</wd-button>
				<view class="gap"></view>
				<wd-button class="btn" type="primary" size="large" @tap="onLogin">
					用户登录
				</wd-button>
			</view>

			<image
				class="img img__star"
				src="/static/icons/login_star.png"
				mode="aspectFit"
			></image>
		</view>
	</view>
</template>

<script setup>
import { ref } from 'vue';

import { useController } from './contorller.js';

import IconStuf from '../../static/icons/login_stuf.png';
import IconTimer from '../../static/icons/login_timer.png';
import IconCompass from '../../static/icons/login_compass.png';
import IconStar from '../../static/icons/login_star.png';

const formRef = ref();

const { formData, ...ctl } = useController();

const onLogin = async () => {
	const { valid } = await formRef.value.validate();
	if (!valid) return;

	ctl.login();
};

const onGuestLogin = () => {
	ctl.guestLogin();
};
</script>

<style scoped>
.page {
	position: relative;
	background-color: #a4beef;
}

.login-box {
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;

	height: 70%;
	padding: 0 40rpx;

	border-radius: 64rpx 64rpx 0 0;
	background-color: rgba(255, 255, 255, 0.84);
}

.login-box-title {
	padding-top: 80rpx;
	padding-bottom: 40rpx;
	font-size: 36px;
	text-align: center;
}

.login-box-form {
	padding: 40rpx 0;
	border-radius: 32rpx;
	/* outline: 1px solid red; */
	background-color: #fff;
}

.login-box-footer {
	padding-top: 40rpx;
	display: flex;
}
.gap {
	width: 40rpx;
}
.btn {
	flex: 1;
}
.btn__guest {
	/* background-color: #fafafa; */
	background-color: transparent;
	border: 1px solid #d5d5d5;
}

/*  */
.img {
	position: absolute;
}

.img__star {
	width: 294rpx;
	height: 320rpx;

	left: 50%;
	transform: translateX(-50%);
	top: -240rpx;
}

.img__compass {
	width: 160rpx;
	height: 160rpx;

	top: 20rpx;
	left: 20rpx;
}

.img__timer {
	width: 200rpx;
	height: 200rpx;
	right: 0px;
	top: 0px;
}

.img__stuf {
	width: 200rpx;
	height: 362rpx;

	left: -30px;
	top: 35%;
}
</style>
